<template>
    <popup
        :show="showPopup"
        title="订阅会员"
        :async-close="true"
        confirmButtonText=""
        cancelButtonText="关闭"
        width="600px"
        @close="emits('close')"
    >
        <div class="p-6 pt-3 pb-0">
            <div class="mb-3">
                <el-button
                    type="primary"
                    v-perms="['market:subscribe:open_vip']"
                    @click="vipPopup = true"
                >
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    <span>开通会员</span>
                </el-button>
            </div>

            <el-table :data="subscribeList">
                <el-table-column prop="name" label="套餐名称">
                    <template #default="{ row }">
                        <span>{{ row?.name }}</span>
                        <el-tag
                            v-if="row.is_effect"
                            type="success"
                            size="small"
                            class="ml-2"
                        >生效中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="effect_time" label="生效时间"/>
                <el-table-column prop="alias" label="到期时间">
                    <template #default="{ row }">
                        <span v-if="row.is_perpetual">长期</span>
                        <span v-else>{{ row?.expire_time }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <vip-open
            v-if="vipPopup"
            :user_id="userId"
            @close="vipPopup = false"
            @success="handleVipOpen"
        />
    </popup>
</template>

<script setup lang="ts">
import userApi from '@/api/users/user'
import VipOpen from "@/views/user/components/vip-open.vue"

const emits = defineEmits(['success', 'close'])

const userId = ref<number>(0)
const vipPopup = ref<boolean>(false)
const showPopup = ref<boolean>(false)
const subscribeList = ref([])

/**
 * 打开表单
 *
 * @param {any} id
 * @returns {Promise<void>}
 */
const open = async (id: number): Promise<void> => {
    userId.value = id
    showPopup.value = true
    subscribeList.value = await userApi.subscribe(id)
}

const handleVipOpen = async () => {
    vipPopup.value = false
    subscribeList.value = await userApi.subscribe(userId.value)
}

defineExpose({
    open
})
</script>
